<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>prop:手动决定这些 attribute 会被赋予哪个元素</title>
        <script src="../public/vue2.7.14-dev.js"></script>
    </head>
    <body>
        <div id="app">
            <base-input
                label="Username:"
                v-model="username"
                required
                placeholder="Enter your username"
                @inp="shuru"></base-input>
        </div>

        <script>
        Vue.component('base-input', {
  inheritAttrs: false,//如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('inp', $event.target.value)"
      >
    </label>
  `
})// <!-- 使用 $attrs 对象传递所有未被 props 所接收的特性 -->
    let vm=new Vue({
        el:'#app',
        data(){
            return {
                username:"luoyu"
            }
        },
        methods: {
            shuru(value){
                console.log(value);
            }
        },
    })
    </script>
    </body>
</html>